<div class="pb15" *ngIf="(model | json) === '{}'">
  <nz-empty nzNotFoundImage="simple" [nzNotFoundContent]="contentTpl">
    <ng-template #contentTpl>
      <span i18n>Click the send button to get a test report</span>
    </ng-template>
  </nz-empty>
</div>
<div class="p-[20px]" *ngIf="model && (model | json) !== '{}'">
  <!-- Status Bar -->
  <div
    *ngIf="model?.statusCode"
    class="mb-[15px] basic_info_bar  flex justify-between {{ model.statusCode ? codeStatus.class : 'test-error' }}"
  >
    <div class="fs16" id="statusCode">{{ model.statusCode || 'No Response' }}</div>
    <div class="flex items-center text-[12px]">
      <span class="mr-[15px]" id="size">Size: {{ model.responseLength | byteToString }}</span>
      <span id="time">Time: {{ model.time }}ms</span>
    </div>
  </div>
  <!-- Test Alert Tip -->
  <eo-ng-feedback-alert
    class="eo_alert_bar"
    *ngFor="let item of model.reportList"
    [nzType]="item.type === 'interrupt' ? 'error' : 'info'"
    [nzMessage]="item.content?.toString()"
    nzShowIcon
  >
  </eo-ng-feedback-alert>
  <!-- Response -->
  <div *ngIf="model.responseType">
    <ng-container *ngIf="responseIsImg; else stream">
      <img loading="lazy" class="max-w-full" [src]="imgBlobUrl" />
    </ng-container>
    <ng-template #stream>
      <ng-container *ngIf="model.responseType === 'stream' && model.responseLength > 500000; else longText">
        <div class="text-center">
          <span i18n>Unable to preview non-text type data, you can</span>
          <button class="eo_theme_btn_default mlr5" type="button" (click)="downloadResponseText()" i18n="@@downloadResponse">
            download response
          </button>
          <span i18n>and open it with other programs.</span>
        </div>
      </ng-container>
    </ng-template>
    <ng-template #longText>
      <ng-container *ngIf="model.responseType === 'longText' && model.responseLength > 500000; else other">
        <div class="text-center">
          <span i18n>The response result exceeds the previewable size, you can</span>
          <button i18n="@@downloadResponse" class="eo_theme_btn_default mlr5" type="button" (click)="downloadResponseText()">
            download response
          </button>
          <!-- or
        <button class="eo_theme_btn_default" type="button" (click)="newTabResponseText()">在新标签页中显示返回结果</button>
        and open it with other programs. -->
        </div>
      </ng-container>
    </ng-template>
    <ng-template #other>
      <eo-monaco-editor
        class="mt-[20px] border-all"
        [autoFormat]="true"
        [autoType]="true"
        [code]="responseBody"
        [config]="{ readOnly: true }"
        [eventList]="['type', 'format', 'copy', 'search']"
      ></eo-monaco-editor>
    </ng-template>
  </div>
</div>
